  //背景颜色
$("button").click(function(){
  $(this).css({
    "color":"#fff","backgroundColor":"#000"
  })
})
$(".btn44").click(function(){
  $(this).css({
    "color":"#fff","backgroundColor":"red"
  })
})
$(".btn4").click(function(){
  $(this).css({
    "color":"#000","backgroundColor":"#cacaca"
  })
})

// 选项卡

var a1 = $(".img2");
var a2 = $(".img1");
$(a1).click(function () {
  $(this).css({
    color: "red",
    background: "#000",
  });
  $(this).siblings().css({
    color: "#cacaca",
    background: "#fff",
  });
  var a = $(this).index();
  $(a2).eq(a).css("display", "block");
  $(a2).eq(a).siblings().css("display", "none");
});



//  选择颜色

 var btn=document.querySelectorAll(".btn1")
 var img=document.querySelectorAll(".img1")

console.log(btn[0])
btn[0].onclick=function(){
  img[1].style.display="block"
  img[0].style.display="none"
  img[2].style.display="none"
  img[3].style.display="none"
  btn[1].style.backgroundColor="#"+"fff"
}
btn[1].onclick=function(){
  img[0].style.display="block"
  img[1].style.display="none"
  img[2].style.display="none"
  img[3].style.display="none"
  btn[0].style.backgroundColor="#"+"fff"
}




$(".btn44").click(function(){
  alert("小伙子？发工资了？")
  location.href="加入购物车.html"
})

// 调用id接口

var pid1=`http://jx.xuzhixiang.top/ap/api/detail.php`
var obj=new URLSearchParams(location.search)
var pid=obj.get("pid")
axios.get(pid1,{params:{id:pid},}).then((res)=>{
  var {data}=res;
  var pObj=data.data
  var html=`
      <h3>${pObj.pname}</h3>
  `
  var item=document.querySelector("h3")
  item.innerHTML=html
})
  // 单价
var pid1=`http://jx.xuzhixiang.top/ap/api/detail.php`
var obj=new URLSearchParams(location.search)
var pid=obj.get("pid")
axios.get(pid1,{params:{id:pid},}).then((res)=>{
  var {data}=res;
  var pObj=data.data
  var html=`
      <p class="s8">$${pObj.pprice}</p>
  `
  var item=document.querySelector("p")
  item.innerHTML=html
  // +-  总价
var tex =document.querySelector(".tex")
var btn1=document.querySelector(".jia")
var btn2=document.querySelector(".jian")
var p =document.querySelector(".s8")
var zong=document.querySelector(".zongjia")
var a= tex.innerHTML
  var s=1
btn1.onclick=function(){
   s++ 
   tex.innerHTML=s
   var a5="$"+`${pObj.pprice}`*s
   console.log(a5)
   zong.innerHTML=a5
   tex.innerHTML=s
}
btn2.onclick=function(){
  s--
  var a5="$"+`${pObj.pprice}`*s
  console.log(a5)
  zong.innerHTML=a5
  tex.innerHTML=s
  if(s<=1){
    s=1
  }
}
})
// 加入购物车
var pid1=`http://jx.xuzhixiang.top/ap/api/detail.php`
var obj=new URLSearchParams(location.search)
var pid=obj.get("pid")
axios.get(pid1,{params:{id:pid},}).then((res)=>{
  var {data}=res;
  var pObj=data.data
  var html=`
      <button class="btn4"> 加入购物车</button>
  `
  var item=document.querySelector(".btn4")
  item.innerHTML=html
 
  // 加入购物车点击
  item.onclick= async function(){
    // console.log(123)
    var uid=localStorage.getItem("id")
    var tex=document.querySelector(".tex")
    var pnum=tex.innerText
    var params={uid,pid,pnum}
    console.log(params)
    let {data}=await axios.get(`http://jx.xuzhixiang.top/ap/api/add-product.php`,{params})
    console.log(data)
      location.href="加入购物车.html"
    
 
  }
})













